<template>
    <div>
      <div class="con-top">
        <div class="con-top-left">
          <div class="touxiang">
            <img src="../../../static/zwf/mine/touxiang.png" alt="">
          </div>
          <p v-if="bol">您好,<span>{{phone | hideMiddle}}</span></p>
          <p  v-else>您还没有登录,请点击
            <router-link to="/login">
              <span style="color: #f00;">登录</span>
            </router-link>
          </p>
        </div>
        <div class="con-top-right">
          <p>
            <span>当前积分</span>
            <span>{{jifen}}</span>
          </p>
          <p>
            <span>我的钱包</span>
            <span>¥{{money}}</span>
          </p>
          <p>
            <router-link to="/chongzhi">
              <a class="a1">充值有礼>></a>
            </router-link>
            <router-link to="/Chongzhika">
              <a class="a2">充值卡兑换>></a>
            </router-link>
          </p>
        </div>
      </div>
      <div class="con-bot"></div>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Myaccount",
      data(){
          return{
            jifen:0,
            money:0,
            bol:true
          }
      },
      filters:{
        hideMiddle(val) {
          return `${val.substring(0,3)}****${val.substring(val.length-4)}`
        }
      },
      computed:{

          phone(){
            var cc = this.$store.state.phone
            if(cc!=""){
              return cc;
            }else{
              this.bol=false;
              this.jifen=0;
              this.money=0;
            }
          }
      },
      mounted(){
        var params=new URLSearchParams();
        params.append('iphone',this.$store.state.phone);

        axios.post('/api/firday/userinfo.php',params).then(res=>{
          var arr1=res.data;
          this.jifen=arr1[0].integral;
          this.money=arr1[0].money;
        })
      }
    }
</script>

<style scoped>
.con-top{
  width: 1083px;
  height: 218px;
  background: #f4fff2;
  border: 1px solid #e7e7e7;
  margin-bottom: 20px;
}
.con-bot{
  width: 1083px;
  height: 383px;
  border: 1px solid #e7e7e7;
  background: url("../../../static/zwf/mine/account.png") no-repeat center/cover;
}
  .con-top-left{
    float: left;
    width: 500px;
    height: 218px;
  }
  .touxiang{
    float: left;
    width: 140px;
    height: 138px;
    padding: 40px;
  }
.touxiang img{
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}
.con-top-left p{
  float: left;
  /*width: 100%;*/
  height: 218px;
  line-height: 218px;
  font-size: 18px;
  color: #252525;
}
.con-top-left p span{
  color: #f08200;
  font-size: 18px;
}

.con-top-right{
  float: left;
  width: 583px;
  height: 218px;
}
.con-top-right p {
  float: left;
  height: 138px;
  margin-left: 80px;
  padding-top: 80px;
  text-align: center;
}
.con-top-right p:last-child{
  text-align: left;
}
.con-top-right p span,.con-top-right p a{
  color: #252525;
  display: block;
  font-size: 18px;
}
.con-top-right p span:last-child{
  color:#f08200;
  margin-top: 30px;
}
.con-top-right .a1{
  color:#4b943d;
}
.con-top-right .a2{
  color:#f08200;
  margin-top: 30px;
}

</style>
